<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb> 
        <!-- 卡片区域 -->
        <el-card class="box-card">
            <!-- 添加分类 -->
            <el-row>
                <el-col>
                    <el-button type="primary" @click="addCateDialogOpen">添加分类</el-button>
                </el-col>
            </el-row>
            <!-- 表格区域 -->
            <tree-table class="treeTable" :data="cateList" 
            :columns="columns" :show-row-hover="false"
            :expand-type="false" :selection-type="false" :show-index="true" border>
                <!-- 插入模板  是否有效-->
                <template slot="isOK" slot-scope="scope"> 
                    <i style="color:lightgreen" class="el-icon-success" 
                        v-if="scope.row.cat_deleted === false"></i>
                    <i style="color:red" class="el-icon-error"
                        v-else></i>
                </template>
                <!-- 排序 -->
                <template slot="order" slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
                    <el-tag size="mini" v-else-if="scope.row.cat_level === 1" type="success">二级</el-tag>
                    <el-tag size="mini" v-else type="warning">三级</el-tag>
                </template>
                <!-- 操作 -->
                <template slot="opt" slot-scope="scope">
                    <el-button type="primary" @click="editCateInfo(scope.row.cat_id)" icon="el-icon-edit">编辑</el-button>
                    <el-button type="danger"  @click="removeCateById(scope.row.cat_id)" icon="el-icon-delete">删除</el-button>
                </template>
            </tree-table>
            <!-- 分页实现 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
            <!-- 添加分类 -->
            <el-dialog title="添加商品分类"
                :visible.sync="addCateDialogVisible" width="50%"
                @close="cateDialogClosed">
                <!-- 添加分类 表单 -->
                <el-form :model="cateForm" :rules="cateRules" ref="cateFormRef" 
                    label-width="100px" >
                    <el-form-item label="分类名称" prop="cat_name">
                        <el-input v-model="cateForm.cat_name"></el-input>
                    </el-form-item>
                    <el-form-item label="父级分类" >
                        <!-- 级联选择器  
                        options:指定数据源; 
                        cascaderProps:用来指定配置对象
                        selectedKeys:选中的父级选中项 Id 
                        parentCateChange：父级级联选择框 发生变化时-->
                        <el-cascader expand-trigger='hover' v-model="selectedKeys"
                        :options="parentCateList" :props="cascaderProps"
                        @change="parentCateChange" clearable change-on-select>
                        </el-cascader>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addCateDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addCate">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 编辑商品分类 -->
            <el-dialog title="编辑商品分类"
                :visible.sync="editCateDialogVisible" width="50%" @close="editCateClosed" >
                <!-- 编辑表单 -->
                <el-form :model="editCateFrom" :rules="editRules" ref="editFormRef"
                        label-width="100px">
                    <el-form-item label="分类名称" prop="cat_name">
                        <el-input v-model="editCateFrom.cat_name"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editCateDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addEditCate">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>
<script>
export default {
    name:'Cate',
    data(){
        return {
            // 商品请求参数
            queryInfo:{
                // 不传层数，表示获取所有级层
                type:'3',
                pagenum:1,
                pagesize:5
            },
            // 商品数据列表
            cateList:[],
            // 数据的总条数
            total:0,
            // 为 table 指定列的定义
            columns:[
                {
                    label:'分类名称', // 列的标题
                    prop:'cat_name', // 数据属性
                },
                {
                    label:'是否有效',
                    // 将当前定义为模板列
                    type:'template',
                    // 表示当前列所使用模板的名称
                    template:'isOK'
                },
                {
                    label:'排序',
                    type:'template',
                    template:'order'
                },
                {
                    label:'操作',
                    type:'template',
                    template:'opt'
                }
            ],
            // 控制添加分类的显示与隐藏
            addCateDialogVisible:false,
            // 分类表单数据对象
            cateForm:{
                // 将要添加的分类名称
                cat_name:'',
                // 父级分类ID
                cat_pid:0,
                // 分类的等级，默认要添加的是1级分类
                cat_level:0
            },
            // 添加分类的 验证规则 对象
            cateRules:{
                cat_name:[
                    {
                        required:true,
                        message:'请输入分类名称',
                        trigger:'blur'
                    },
                    {
                        min:4,max:15,
                        message:'名称必须是4~15个字符',
                        trigger:'blur'
                    }
                ]
            },
            // 保存 父级分类数据
            parentCateList:[],
            // 配置级联选择 显示框数据
            cascaderProps:{
                value:'cat_id',
                label:'cat_name',
                children:'children'
            },
            // 存储 选中父级分类的ID
            selectedKeys:[],
            // 控制编辑商品分类 显示与隐藏
            editCateDialogVisible:false,
            // 渲染编辑商品分类信息 表单
            editCateFrom:{
                cat_name:''
            },
            // 预存分类Id
            saveCateId:'',
            // 编辑表单 验证规则 对象
            editRules:{
                cat_name:[
                    {
                        required:true,
                        message:'请输入分类名称',
                        trigger:'blur'
                    }
                ]
            }
        }
    },
    created(){
        // 获取商品数据列表
        this.getCateListData();
    },
    methods:{
        // 获取商品分类列表所有数据
        async getCateListData(){
            const {data:res} = await this.$http.get('/categories',{
                params:this.queryInfo
            })
            if(res.meta.status !== 200){
                return this.$message.error('获取商品分类数据失败！');
            } 
            // 保存数据  数据列表
            this.cateList = res.data.result;
            // 获取数据总条数
            this.total = res.data.total;
        },
        // 当前页数据发生改变时
        handleSizeChange(newPage){
            this.queryInfo.pagesize = newPage;
            this.getCateListData();
        },
        // 当前页码值发生改变时
        handleCurrentChange(newNum){
            this.queryInfo.pagenum = newNum;
            this.getCateListData();
        },
        // 添加分类 对话框
        addCateDialogOpen(){
            // 在添加之前，将父级数据获取
            this.getParentList()
            this.addCateDialogVisible = true;
        },
        // 添加分类 关闭
        cateDialogClosed(){
            // 重置清空表单
            this.$refs.cateFormRef.resetFields();
            this.selectedKeys = [];
            this.cateForm.cat_pid = 0;
            this.cateForm.cat_level= 0;
        },
        // 获取父级列表数据
        async getParentList(){
            this.parentCateList = [];
            const {data:res} = await this.$http.get('/categories',{
                params:{
                    type:'2',
                }
            })
            console.log(res,"父级列表数据");
            if(res.meta.status !== 200){
                return this.$message.error('获取父级列表数据失败！');
            } 
            // 存储 数据
            this.parentCateList = res.data; 
            console.log(res.data,'');
        },
        // 父级级联选择框发生变化
        parentCateChange(){
            // 判断selectedKeys数组 length > 0 ，证明选中父级分类
            // 反之，就说明 没有选中父级分类 
            if(this.selectedKeys.length > 0){
                // 父级分类的Id
                this.cateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1];
                // 为当前分类等级 赋值
                this.cateForm.cat_level = this.selectedKeys.length;
                return 
            }else{
                // 父级分类的Id
                this.cateForm.cat_pid = 0;
                // 为当前分类等级 赋值
                this.cateForm.cat_level = 0;
            } 
        },
        // 点击按钮 添加新的分类
        addCate(){
            // 提交分类 之前，进行预校验
            this.$refs.cateFormRef.validate(async valid => {
                if(!valid) return
                // 发送请求 添加分类数据
                const {data:res} = await this.$http.post('/categories',this.cateForm);
                if(res.meta.status !== 201){
                    return this.$message.error('分类添加失败！');
                }
                this.$message.success('分类添加成功！');
                this.getCateListData();
                this.addCateDialogVisible = false
            })
        },
        // 编辑商品分类
        async editCateInfo(id){  
            // 保存分类 ID
            this.saveCateId = id;
            // 根据Id查询 对应的商品分类信息
            const {data:res} = await this.$http.get('/categories/'+id);
            if(res.meta.status !== 200){
                return this.$message.error('获取商品分类信息失败！');
            }

            this.editCateFrom = res.data;
            console.log(this.editCateFrom)
            this.editCateDialogVisible = true;
        },
        // 编辑修改商品分类
        addEditCate(){
            // 预校验 分类名称
            this.$refs.editFormRef.validate(async valid => {
                if(!valid) { return }
                // 请求提交分类数据
                const {data:res} = await this.$http.put('/categories/'+this.saveCateId,{
                    cat_name:this.editCateFrom.cat_name
                });

                if(res.meta.status !== 200) {
                    return this.$message.error('修改分类失败！');
                }
                // 成功 提示信息成功、更新商品列表、关闭编辑商品提示框
                this.$message.success('修改分类成功！');
                this.getCateListData();
                this.editCateDialogVisible = false;
            })
        },
        // 关闭商品分类 重置
        editCateClosed(){
            this.$refs.editFormRef.resetFields();
        },
        // 删除商品分类
        async removeCateById(id){
            const confirmResult = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(error => error);
            console.log(confirmResult);
            
            if(confirmResult !== 'confirm'){
                return this.$message.info('已经取消删除分类！');
            }
            // 发送删除操作
            const {data:res} = await this.$http.delete('/categories/'+id);
            if(res.meta.status !== 200){
                return this.$message.error('删除分类失败！');
            }
            this.$message.success('删除分类成功!');
            this.getCateListData(); 
        }   
    }
}
</script>

<style lang="less" scoped>
.treeTable{
    margin: 15px 0;
}
.el-cascader {
    width: 100%;
}
</style>
